import React, { PureComponent } from 'react'
import { Text, View ,TouchableOpacity,Image,StyleSheet} from 'react-native'
import {Heading2,Paragraph} from '../../widget/Text'
import color  from '../../widget/color.js'
export default class GroupPurchaseCeil extends PureComponent {
  render() {
      let { info ,onPress} = this.props;
       let imageUrl = info.imageUrl.replace('w.h','160.0');
       let  price = info.price; 
       let title = info.title;
       let subtitle = info.subtitle;

    return (
      <TouchableOpacity style={styles.container} onPress={()=>{
          onPress(info)
      }}>
        <Image style={styles.icon} source={{uri:imageUrl}}/>
        <View style={styles.rightContainer}>
           <Heading2>{title}</Heading2>
           <Paragraph sytle={{marginTop:88}}>{subtitle}</Paragraph>
           <View style={{flex:1,justifyContent: 'flex-end',}}>
           <Heading2 style={styles.price}>{price}元</Heading2>
           </View>
        </View>
      </TouchableOpacity>
    )
  }
}

const styles = StyleSheet.create({
    container:{
        flexDirection: 'row',
        padding: 10,
        borderBottomWidth:StyleSheet.hairlineWidth,
        borderColor: color.border,
        backgroundColor: 'white',
    },
    icon:{
        width:80,
        height:80,
        borderRadius: 5,
        
    },
    rightContainer:{
        flex:1,
        paddingLeft:20,
        paddingRight: 10,
    },
    price:{
        color:color.primary,
        
    }
})
